var curId;
var photos = [];
var usr;

function picassaAlbums(user) {
	$(document.body).append("<div id='overlay'></div>");
	$(document.body).append("<div id='photos'></div>");
	$("#overlay").css("opacity", "0.9");
	scroll(0, 0);
	var v = getViewPort();
	var h = v.height;
	var w = v.width;

	$(document.body).css("overflow", "hidden");
	if (h < 500)
		h = 500;
	if (w < 800)
		w = 800;
	$("#overlay").width(w);
	$("#photos").height(h);
	$("#photos").width(w);
	$("#overlay").height(h);
	$("#overlay").css("position", "absolute");
	$("#photos").css("position", "absolute");
	usr = user;
	showAlbums();
}

function showAlbums() {
	$("#photos").addClass("loading");
	$.getScript("http://picasaweb.google.com/data/feed/api/user/" + usr
			+ "?alt=json-in-script&callback=renderAlbum");
}

function showPhotos(src) {
	$("#photos").html("");
	$("#photos").addClass("loading")
	$.getScript("http://picasaweb.google.com/data/feed/api/user/" + usr
			+ "/album/" + src + "?alt=json-in-script&callback=renderPhotos");
}

function log(a) {
	if (window.console)
		console.log(a)
}

function renderAlbum(res) {
	$("#photos").removeClass("loading").css("overflow", "auto");
	var photoDiv = $("#photos");
	var imgContainer = $("<div class='img'></div>");
	var albums = res.feed.entry;
	photoDiv.append("<a href='#' id='close'></a>");
	$("#close").click(function() {
		$("#overlay").remove();
		$("#photos").remove();
		$(document.body).unbind("keyup");
		$(document.body).css("overflow", "");
	});
	photoDiv.append("<h3 class='albheader'>My albums</h3>")
	for ( var i = 0; i < albums.length; i++) {
		var photo = {
			icon : albums[i].media$group.media$thumbnail[0].url,
			img : albums[i].media$group.media$content[0].url,
			title : albums[i].title.$t,
			description : albums[i].summary.$t,
			albumSrc : albums[i].gphoto$name.$t
		};
		var theImg = imgContainer.clone();
		theImg.append("<img src='" + photo.icon
				+ "' width='100%' height='100%'/>");
		theImg.appendTo(photoDiv);
		theImg.wrap("<div class='imgWrap'>")
		theImg.data("photo", photo);
		theImg.hover(function() {
			var tipDiv = $("<div id='tooltip'>");
			var photo = $(this).data('photo');
			tipDiv.append("<b>" + photo.title + "<b>");
			tipDiv.css("opacity", "0");
			tipDiv.animate( {
				"opacity" : "0.6"
			});
			$(this).append(tipDiv);
			$(this).animate( {
				"margin-left" : 0,
				"margin-top" : 0,
				"margin-right" : 0,
				"margin-bottom" : 0,
				width : 180,
				height : 180
			}, "fast");
		}, function() {
			$("#tooltip").remove();
			$(this).animate( {
				"margin-left" : 10,
				"margin-top" : 10,
				"margin-right" : 10,
				"margin-bottom" : 10,
				width : 160,
				height : 160
			}, "fast");
		});
		theImg.click(function() {
			showPhotos($(this).data('photo').albumSrc)
		});
	}
	photoDiv.append("<div class='projInfo'><a href='http://code.google.com/p/picasa-import'>Picassa import</a> by <a href='http://abhihebbar.info'>Abhilash S Hebbar</a></div>")
}

function renderPhotos(data) {
	$("#photos").removeClass("loading").css("overflow", "hidden");
	var res = data.feed.entry;
	photos = [];
	for ( var i = 0; i < res.length; i++) {
		photos[i] = {
			src : res[i].content.src,
			title : res[i].title.$t,
			description : res[i].summary.$t,
			height : parseInt(res[i].gphoto$height.$t),
			width : parseInt(res[i].gphoto$width.$t)
		}
	}
	curId = 0;
	$("#photos").append("<a href='#' id='close'></a>");
	$("#close").click(function() {
		$("#overlay").remove();
		$("#photos").remove();
		$(document).unbind("keyup");
		$(document.body).css("overflow", "");
	});
	$("#photos").append("<a href='#' id='toAlbs'>Back to albums</a>");
	$("#toAlbs").click(function() {
		$(document).unbind("keyup");
		$("#photos").html("");
		showAlbums();
	});
	nextPic();
	$(document).keyup(
			function(e) {
				if (e.keyCode == 37 || e.which == 37) {
					$(".photoWrap").animate(
							{
								"margin-left" : -600 * photos[curId].width
										/ photos[curId].height,
								"margin-top" : -300,
								width : 600 * photos[curId].width
										/ photos[curId].height,
								height : 600,
								left : 0,
								opacity : 0
							}, nextPic);
					if (curId > 0)
						curId -= 1;
					else
						curId = photos.length - 1;
				}
				if (e.keyCode == 38 || e.which == 38) {
					$(".photoWrap").animate(
							{
								"margin-left" : -300 * photos[curId].width
										/ photos[curId].height,
								"margin-top" : -600,
								width : 600 * photos[curId].width
										/ photos[curId].height,
								height : 600,
								top : 0,
								opacity : 0
							}, nextPic);
					if (curId > 0)
						curId -= 1;
					else
						curId = photos.length - 1;
				}
				if (e.keyCode == 39 || e.which == 39) {
					$(".photoWrap").animate(
							{
								"margin-left" : 300 * photos[curId].width
										/ photos[curId].height,
								"margin-top" : -300,
								width : 600 * photos[curId].width
										/ photos[curId].height,
								height : 600,
								opacity : 0
							}, nextPic);
					if (curId + 1 < photos.length)
						curId += 1;
					else
						curId = 0;
				}
				if (e.keyCode == 40 || e.which == 40) {
					$(".photoWrap").animate(
							{
								"margin-left" : -300 * photos[curId].width
										/ photos[curId].height,
								"margin-top" : 300,
								width : 600 * photos[curId].width
										/ photos[curId].height,
								height : 600,
								opacity : 0
							}, nextPic);
					if (curId + 1 < photos.length)
						curId += 1;
					else
						curId = 0;
				}
				log(e);
			});
	$("#photos").append("<div class='projInfo'><a href='http://code.google.com/p/picasa-import'>Picassa import</a> by <a href='http://abhihebbar.info'>Abhilash S Hebbar</a></div>")
}

function nextPic() {
	if (curId > photos.length)
		return;
	var photoDiv = $("#photos");
	$(".photoWrap", photoDiv).remove();
	var photoWrap = $("<div class='photoWrap'>")
	var img = $("<img src='" + photos[curId].src + "' height='100%'>");
	preload(photos[curId + 1]);
	photoWrap.append(img).appendTo(photoDiv);
	photoWrap.css( {
		"margin-left" : -50 * photos[curId].width / photos[curId].height,
		"margin-top" : -50,
		height : 100
	});
	photoWrap.width(img.width());
	photoWrap.animate( {
		"margin-left" : -200 * photos[curId].width / photos[curId].height,
		"margin-top" : -200,
		width : 400 * photos[curId].width / photos[curId].height,
		height : 400
	}, function() {
		photoWrap.append("<div id='caption'>" + photos[curId].description
				+ "</div>");
		$("#caption").css( {
			width : photoWrap.width() - 20,
			"margin-top" : -50
		}).fadeIn();
	});
	photoWrap.click(function() {
		$(this).animate( {
			"margin-left" : -300 * photos[curId].width / photos[curId].height,
			"margin-top" : -300,
			width : 600 * photos[curId].width / photos[curId].height,
			height : 600,
			opacity : 0
		}, nextPic);
		if (curId + 1 >= photos.length)
			curId = 0;
		else
			curId++;
	});
}

function preload(photo) {
	if (document.images && photo) {
		var ph = new Image(photo.height, photo.width);
		ph.src = photo.src;
	}
}

function getViewPort() {
	var viewportwidth;
	var viewportheight;
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerWidth, viewportheight = window.innerHeight
	} else if (typeof document.documentElement != 'undefined'
			&& typeof document.documentElement.clientWidth != 'undefined'
			&& document.documentElement.clientWidth != 0) {
		viewportwidth = document.documentElement.clientWidth,
				viewportheight = document.documentElement.clientHeight
	} else {
				viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
				viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
	return {
		height : viewportheight,
		width : viewportwidth
	};
}
